Many web developers may not be aware that the elements they use to create their web pages belong to three different types. By elements, I mean marked up parts of a page, for example, paragraphs, lists, list items, and so on.
Each type of element displays in a different way. This is why CSS has a display-type property. With the display type property you can, theoretically, redefine the display type of an element. In practice, browsers may (and mostly do) ignore any attempt to redefine the display-type of an element. Instead, they use the display type as specified by the World Wide Web Organization's HTML recommendation.
The different classes of display are:
Block elements are separated from surrounding elements in the flow of the HTML page. Browsers generally give block elements a standard margin to the top and bottom. With cascading style sheets, you can redefine the margin around block elements.
Inline elements are not separated from surrounding elements in the flow, but rather follow directly on from their adjacent elements. Inline elements display just as text does on a page.
List item elements display similarly to block elements, but in addition, a marker (a bullet, or an alpha numeric character) is added to the left of the element, and the element is indented with respect to its parent element. With style sheets an image can be specified as the marker, and different types of marker, in addition to the common disc and square, can be specified.
CSS2 adds other display types related to tables, and for inserted content. These are very specialized, and for more, see our discussion of the display type property.
Positioning in CSS2 introduces ways of laying out web pages properly, removing the need for the awkward "kludges" of tables and spacer gifs that have been used for some time now to give web pages more interesting layout.
You can find out all about how positioning works in our new tutorial Positioning with CSSP.
CSS2 introduces much better control over printing. See our section on printing for all the details
Web pages don't just get read on PC screens, and this section gives the full story on how to design style sheets that adapt to different media (like handheld devices and TV screens).
CSS2 allows for content to be inserted before and after elements. Learn how to do this in our section on generated content.
Suggestions for more advanced topics are gratefully accepted. Ask away or suggest to sm-info@westciv.com
Thanks.
|
|
|
|